<template>
    <div>

        <!-- 条件查询 -->
        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark">
                <el-form :inline="true" :model="searchData"  class="demo-form-inline">

                   <el-form-item label="ID">
                     <el-input v-model="searchData.id" clearable></el-input>
                   </el-form-item>

                  <el-form-item label="年级" :label-width="formLabelWidth">
                      <el-select v-model="searchData.grad" placeholder="请选择" clearable @change="grada">
                        <el-option
                          v-for="item in grade"
                          :value="item.dictValue" 
                          :key="item.dictValue"             
                          :label="item.dictLabel">
                        </el-option>
                      </el-select>
                  </el-form-item>


                  <el-form-item label="学科" :label-width="formLabelWidth">
                      <el-select v-model="searchData.disc" placeholder="请选择" clearable>
                        <el-option                 
                          v-for="item in findData"
                          :value="item.id" 
                          :key="item.id"             
                          :label="item.subject"
                          >
                        </el-option >
                      </el-select>              
                  </el-form-item>

                    <el-button type="primary" @click="search">查询</el-button>

                </el-form>
                </div></el-col>
          </el-row>
        
        <!-- 表格展示 -->
        <el-row>
             <el-col :span="24"><div class="grid-content bg-purple-dark">
                 <el-table :data="testList" height="550" border >
                    <el-table-column prop="id" label="Id" width="100"></el-table-column>
                   <el-table-column  label="学科" width="220">
                       <template slot-scope="scope">
                        {{ scope.row.disc }}(
                           <span v-if="scope.row.grad ==0">一年级</span>
                           <span v-if="scope.row.grad ==1">二年级</span>
                           <span v-if="scope.row.grad ==2">三年级</span>
                           <span v-if="scope.row.grad ==3">四年级</span>
                           <span v-if="scope.row.grad ==4">五年级</span>
                           <span v-if="scope.row.grad ==5">六年级</span>
                           <span v-if="scope.row.grad ==6">初一</span>
                           <span v-if="scope.row.grad ==7">初二</span>
                           <span v-if="scope.row.grad ==8">初三</span>
                           <span v-if="scope.row.grad ==9">高一</span>
                           <span v-if="scope.row.grad ==10">高二</span>
                           <span v-if="scope.row.grad ==11">高三</span>
                        )
                       </template>

                   </el-table-column>

                   <el-table-column prop="testName" label="名称" width="700"></el-table-column>
                   <el-table-column prop="createTime" label="创建时间"></el-table-column>
                   <el-table-column label="操作" width="280">
                       <template slot-scope="scope">                           
                           <el-button size="small"  type="primary"  @click="getID(scope.row)" plain>编辑</el-button>
                           <el-button size="small"  type="danger"    @click="deleteId(scope.row)" plain>删除</el-button>
                       </template>
                   </el-table-column>
                 </el-table>

               <!-- 分页 -->
               <div class="block">
                   <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="pageNum"
                   :page-sizes="[2, 4, 6, 8]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total" style="float:right">
                   </el-pagination>
               </div>


                 </div></el-col>
           </el-row>

    </div>
</template>
<script>
import axios from 'axios';

export default {
    data(){
        return{
            formLabelWidth: '120px', //新增表单宽度
            pageNum:1,
            pageSize:8,
            total:null,
            testList:[],
            searchData:{
                "id":'',
                disc:"",
                grad:""

            },
            grade:[],
            findData:[],
        }
        
    },
    created(){
        this.initTab()
        this.searchDict()
        this.gaea()
    },
    methods:{
        //回显
        getID(row){
            //跳页面并带id
             sessionStorage.setItem("id",row.id);
            this.$router.push("/log")
        },
        //删除
        deleteId(row){
            axios.delete("/api/test/deleteTestById?id="+row.id).then(res=>{
                this.$message({
                  message: res.data.message,
                  type: 'success'
                });
                this.initTab();
            })
        },
        initTab(){
            axios.post("/api/test/findTbTestPaginationList?pageNum=" + this.pageNum + "&pageSize=" +this.pageSize,this.searchData).then(res=>{
                this.testList = res.data.data.items
                this.total = res.data.data.totalElements 
            })
        },

        //分页
         handleSizeChange(val) {
          this.pageSize = val;
          console.log(`每页 ${val} 条`);
          this.initTab();
        },
        handleCurrentChange(val) {
          this.pageNum = val;
          console.log(`当前页: ${val}`);
           this.initTab()
        },
        search(){
            this.initTab()
        },
        //年级
        searchDict(){
            axios.get("/api/dict/findDictDataByDictTypeIdSysUserSex?dictType=sys_grade_status").then(res=>{
            this.grade =res.data.data
            })
            
        },
        //判断学科
        grada(val){
          this.subId = val  
          this.Subjec()         
        },
        //学科
        Subjec(){
            axios.get("/api/subject/SubjectList?id="+this.subId).then(res=>{
                this.findData = res.data.data
            })
        },
    }
}
</script>

<style scoped>

</style>